<template>
    <div class="event_types">
        <!--下拉选择时间器-->
       <span style="position: fixed;z-index: 999;left: 0px;top: 0px;left: 466px;top: 407px;">
          <el-select  :popper-append-to-body="false" class="el-select" @change="choicYear(value)" v-model="value" :placeholder="year+'-'+month">
         <el-option
         v-for="item in options1"
         :key="item.value"
         :label="item.label"
         :value="item.value">
         </el-option>
         </el-select>
       </span>
        <!--下拉选择时间器-->
        <div id="event_types">

        </div>
    </div>
</template>

<script>
    import echarts from 'echarts'
    import autotooltip from '../../../common/echarts-auto-tooltip'
    export default {
        name: "EventType",
        data(){
          return{
            options:{
              tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}'+'件'
              },
              legend: {
                textStyle:{
                  fontSize: 18,//字体大小
                  color: '#ffffff'//字体颜色
                },
                orient: "horizontal",
                align: "auto",
                bottom:'0',
                data: ['黄色预警', '橙色预警', '红色预警']
              },
              color:['#f6b114', '#fb7e22','#ff3c4b'],
              series: [
                {
                  name: '事件预警',
                  type: 'pie',
                  center: ['50%', '40%'],//设置饼状图的位置
                  // radius: ['50%', '70%'],
                  radius: ['50%', '60%'],
                  avoidLabelOverlap: false,

                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '30',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    {value: 335, name: '黄色预警', label: {show: true}},
                    {value: 310, name: '橙色预警',label: {show: true, }},
                    {value: 234, name: '红色预警',label: {show: true, }},
                  ]
                }
              ]
            },//echarts测试
            options1:[],//下拉选择的数组
            value:'',//下拉选择框的测试数据
            selectTime:'',//下拉选择的时间年月
            year:'',
            month:'',
            autoplay:null,
          }
        },

        // props:{
        //   date:String,
        // },

        mounted(){
          this.getWarns();
          this.getYearMonth();
        },


        // watch:{
        //   date(newValue, oldValue) {
        //     // console.log('新的值：',newValue,'*旧的值：',oldValue);
        //     this.getFatherData(newValue);
        //   },
        // },



        methods:{


          choicYear(y) {
              let that = this;
              // console.log('当前年月日：',that.options1[y].label);
              // that.selectTime=that.options1[y].label;
             that.$http.get("/api/DataCenterApi/getWarningEventCount?vollege_id="+that.$util.vollege_id+"&month="+that.options1[y].label,null,r=>{
              // console.log('饼状图的数据为：',r.data);
              let colors=[];//事件预警颜色数组
              let legend_data=[];//echarts的legend的data数组
              let series_data=[];//echarts的series的data数组
              let count = r.data.length;//echarts循环toollip的次数
              r.data.forEach(function (v) {
                colors.push(v.value);
                legend_data.push(v.title+"预警");
                series_data.push({value:v.num,name:v.title+"预警",label: {show: true}});
              });
              // console.log('colors:',colors);
              // console.log('legend_data:',legend_data);
              // console.log('series_data:',series_data);
              console.log('count:',count);
              that.options.color=colors;
              that.options.legend.data=legend_data;
              that.options.series[0].data=series_data;
              let myChart = echarts.init(document.getElementById('event_types'));
              myChart.setOption(that.options);
              autotooltip.autoHover(myChart,that.options, count, 1000);//使用轮播插件
            });



          },//选择月份

          getYearMonth(){
            let that = this;
            that.options1=that.$util.selectYearMonth();

            that.year = new Date().getFullYear()+'';
            that.month = (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1))+'';
            console.log('year:',that.year,'month:',that.month);

          },

          getFatherData(date){
            console.log('父亲传递过来的值：',date);
            let that = this;

            that.$http.get("/api/DataCenterApi/getWarningEventCount?vollege_id="+that.$util.vollege_id+"&month="+date,null,r=>{
              // console.log('饼状图的数据为：',r.data);
              let colors=[];//事件预警颜色数组
              let legend_data=[];//echarts的legend的data数组
              let series_data=[];//echarts的series的data数组
              let count = r.data.length;//echarts循环toollip的次数
              r.data.forEach(function (v) {
                colors.push(v.value);
                legend_data.push(v.title+"预警");
                series_data.push({value:v.num,name:v.title+"预警",label: {show: true}});
              });
              // console.log('colors:',colors);
              // console.log('legend_data:',legend_data);
              // console.log('series_data:',series_data);
              console.log('count:',count);
              that.options.color=colors;
              that.options.legend.data=legend_data;
              that.options.series[0].data=series_data;
              let myChart = echarts.init(document.getElementById('event_types'));
              myChart.setOption(that.options);
              that.autoplay=null;
              // autotooltip.autoHover(myChart,that.options, count, 1000);//使用轮播插件
            });




          },

          getWarns(){

            let that = this;
            that.$http.get("/api/DataCenterApi/getWarningEventCount?vollege_id="+that.$util.vollege_id,null,r=>{
               // console.log('饼状图的数据为：',r.data);
               let colors=[];//事件预警颜色数组
               let legend_data=[];//echarts的legend的data数组
               let series_data=[];//echarts的series的data数组
               let count = r.data.length;//echarts循环toollip的次数
               r.data.forEach(function (v) {
                 colors.push(v.value);
                 legend_data.push(v.title+"预警");
                 series_data.push({value:v.num,name:v.title+"预警",label: {show: true}});
               });
               // console.log('colors:',colors);
               // console.log('legend_data:',legend_data);
               // console.log('series_data:',series_data);
               // console.log('count:',count);
               that.options.color=colors;
               that.options.legend.data=legend_data;
               that.options.series[0].data=series_data;
               let myChart = echarts.init(document.getElementById('event_types'));
               myChart.setOption(that.options);
               that.autoplay=autotooltip;
               that.autoplay.autoHover(myChart,that.options, count, 1000);//使用轮播插件
            });

          },//获取饼状图数据


        },
    }
</script>

<style scoped>
  .event_types{
    width: 513px;
    height: 315px;
  }
  #event_types{
    width: 513px;
    height: 315px;
  }

</style>
